<!--
 * @Author: ryx
 * @LastEditors: ryx
-->
<template>
  <div
    :class="prefixCls"
    :style="{
      width: isCollapsed ? 'calc(100% - 80px)' : 'calc(100% - 216px)',
      transition: '0.2s all'
    }"
  >
    <slot></slot>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'FooterToolBar',
  props: {
    prefixCls: {
      type: String,
      default: 'footer-tool-bar'
    }
  },
  computed: {
    ...mapState(['isCollapsed'])
  }
}
</script>

<style lang="scss" scoped>
.footer-tool-bar {
  position: fixed;
  line-height: 56px;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
}
</style>
